<template>
  <card-container width="302px"  title="话题热搜榜" label="实时更新" more="更多"  @listenCardConMore="$router.push('/topic/rank')" >
    <div @click="changeRoute2('/topic/detail/'+val.topicName)"  class="topic-content__c" v-for="(val,index) in topicList" :key="val.topicId" >
      <p>#{{val.topicName}}#</p>
      <h6>{{val.degree}}℉</h6>
    </div>
  </card-container>
</template>


<script>
  import CardContainer from '../../components/pc/cardContainer';
  import config from "../../action/config";
  export default {
    data(){
       return{
         topicList:[],
       }
    },
    components:{
      CardContainer
    },
    created() {
      this.dataGetHotTopicList()
    },
    methods:{
      dataGetHotTopicList() {
        let params={
          page: 1,
          size: 10
        };
        this.$axios.$get(config.api.get.Topic.hotSearch,{params:params})
          .then((response)=>{
            this.topicList = response.data.dataList;
          });
      },
      changeRoute2(r){
        let routeUrl = this.$router.resolve({
          path: r
        });
        window.open(routeUrl.href,'_blank')
      },
    },
  }

</script>


<style lang="scss">
  .topic-content__c{
    @extend %flex-row-spb;
    @extend %cursorPointer;
    padding:0 16*$length;
    box-sizing: border-box;
    margin-top:20*$length;
    p{
      width:190*$length;
      @include fontStyle(12,16,500,#333,left);
      @extend %nowrap;
      @extend %animate-transition;

      &:hover{
        color:#00AAE6
      }
    }

    h6{
      @include fontStyle(12,16,500,#ccc,left);
      @extend %nowrap;
    }
  }

</style>
